<template>
  <div class="wrapper">
    <div class="search">
      <div class="search_back iconfont" @click="handleBack">&#xe600;</div>
      <div class="search_content">
        <span class="search_content_icon iconfont">&#xe7b3;</span>
        <input class="search_content_input" placeholder="请输入商品名称">
      </div>
    </div>
    <ShopInfo v-if="shanmulist.imgUrl"  :item="shanmulist" :hideBorder="true" />
    <Content :shopName="item.name"/>
    <Cart/>
  </div>

</template>

<script>
import ShopInfo from '@/components/ShopInfo.vue';
import { useRoute, useRouter } from 'vue-router';
import { get } from '../../untils/request'
import { reactive, toRefs } from '@vue/reactivity';
import Content from './Content.vue';
import Cart from './Cart.vue';
//获取商店数据(由于接口不完整,采取路由传递对象的方法实现)
const useShopInfoEffect = () => {
   const route = useRoute()
   const data = reactive({item: {}})
   const getItemData = async () => {
   const result = await get(`/api/shop/${route.params.id}`)
   if(result?.errno === 0 && result?.data){
     data.item = result.data
    }
  }
  const { item } = toRefs(data)
  return { getItemData,item }
}

const useBackRouterEffect = () => {
    const router = useRouter()  
    const handleBack = () => {
          router.back()
      }
      return { handleBack }
}
export default {
    name: "Shop",
    components: { ShopInfo, Content, Cart },
    setup() {
      const route = useRoute()
      const shanmulist = JSON.parse(route.query.shanmu)
      console.log(shanmulist);
      const { getItemData,item } = useShopInfoEffect()
      const { handleBack } = useBackRouterEffect()
        getItemData()
        return { item,handleBack,shanmulist }
    }
}
</script>

<style lang="scss">
@import '../../style/viriables.scss';
.wrapper {
  padding: 0 .18rem;
.search {
  display: flex;
  margin: .14rem 0 .04rem 0;
  line-height: .32rem;
  &_back {
    width: .3rem;
    font-size: .24rem;
    color: #B6B6B6;
  }
  &_content {
    .iconfont{
      font-size: .24rem;
    }
    display: flex;
    flex: 1;
    background: $search-bgColor;
    border-radius: .16rem;
    &_icon {
      width: .44rem;
      text-align: center;
      color: $search-fontColor;
    }
    &_input {
      display: block;
      width: 100%;
      padding-right: .2rem;
      border: none;
      outline: none;
      background: none;
      height: .32rem;
      font-size: .14rem;
      color: $content-fontcolor;
      &::placeholder {
        color: $content-fontcolor;
      }
    }
  }
}
}
</style>